<template>
  <div class="params">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="Ui" tab="前端配置"> </a-tab-pane>
      <a-tab-pane key="Api" tab="后端配置"> </a-tab-pane>
      <a-tab-pane key="WebSet" tab="网站配置"> </a-tab-pane>
      <a-tab-pane key="sysConfig" tab="系统配置"> </a-tab-pane>
    </a-tabs>
    <div class="float-button" @click="reset" style="background: red">
      <a-tooltip>
        <template #title>重启系统</template>
        <UndoOutlined />
      </a-tooltip>
    </div>
    <div class="float-button flb" @click="ping">
      <a-tooltip>
        <template #title>数据库地址测试</template>
        <DatabaseOutlined />
      </a-tooltip>
    </div>
    <div class="float-button flbs" @click="redis">
      <a-tooltip>
        <template #title>redis地址测试</template>
        Redis
      </a-tooltip>
    </div>
    <a-form
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 20 }"
      autocomplete="off"
      v-if="paramsList.length"
    >
      <dataItem
        :paramsList="paramsList"
        :activeKey="activeKey"
        @item-click="addParams"
        @item-del="delParams"
        @item-setInfo="setInfo"
        @item-set="setInfo"
        @item-edit="editParams"
      ></dataItem>
    </a-form>
    <a-button shape="circle" :icon="h(PlusOutlined)" @click="addParams" />
    <Modal @register="registerModal" @success="getInfo" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, h } from 'vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import dataItem from './dataItem.vue';
  import * as api from './index.api';
  import { useModal } from '@/components/Modal';
  import Modal from './Modal.vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { UndoOutlined, DatabaseOutlined } from '@ant-design/icons-vue';
  const paramsList = ref<any[]>([]);
  const [registerModal, { openModal }] = useModal();
  const activeKey = ref('Ui');
  const { createMessage: msg, createConfirm } = useMessage();
  const getInfo = () => {
    api.get({ parentId: '0' }).then((res) => {
      paramsList.value = res.data;

      paramsList.value.forEach((item) => {
        item.childrens = groupBy(item.children, (x) => x.index);
      });

      console.log(paramsList.value, ' paramsList.value');
    });
  };

  function groupBy(array, keySelector) {
    return array.reduce((result, item) => {
      const key = keySelector(item);
      if (!result[key]) {
        result[key] = [];
      }
      result[key].push(item);
      return result;
    }, {});
  }

  const setInfo = async (info) => {
    let res = await api.set(info);
    msg.success(res.msg || '操作成功');

    getInfo();
  };

  getInfo();

  const addParams = function (item?) {
    openModal(true, { activeKey: activeKey.value, parentId: item.id || '0' });
  };
  const editParams = function (item) {
    openModal(true, { activeKey: activeKey.value, parentId: item.parentId || '0', record: item });
  };
  const reset = function (item) {
    createConfirm({
      title: '重启系统',
      content: '确定要重启吗？',
      iconType: 'warning',
      onOk: async () => {
        await api.reset();
        msg.success('重启成功');
      },
    });
  };
  const ping = function (item) {
    createConfirm({
      title: '测试地址',
      content: '确定测试数据库地址吗？',
      iconType: 'warning',
      onOk: async () => {
        try {
          await api.ping();
          msg.success('数据库地址可用');
        } catch {
          msg.error('数据库地址不可用');
        }
      },
    });
  };
  const redis = function (item) {
    createConfirm({
      title: '测试redis地址',
      content: '确定测试redis地址吗？',
      iconType: 'warning',
      onOk: async () => {
        try {
          await api.redis();
          msg.success('redis地址可用');
        } catch {
          msg.error('redis地址不可用');
        }
      },
    });
  };
  const delParams = function (record, message) {
    createConfirm({
      title: '删除配置',
      content: message || '确定要删除吗？删除后不可恢复',
      iconType: 'warning',
      onOk: async () => {
        let ids = Array.isArray(record) ? record.map((x) => x.id) : [record.id];
        await api.del(ids);
        msg.success('删除成功');
        getInfo();
      },
    });
  };
</script>

<style lang="less" scoped>
  .params {
    background: @component-background;
    padding: 20px;
    margin: 20px;
  }

  .flb {
    bottom: 120px !important;
  }
  .flbs {
    bottom: 180px !important;
    font-size: 12px !important;
  }
  .float-button {
    position: fixed;
    right: 80px;
    bottom: 60px;
    font-size: 20px;
    color: #fff;
    background-color: #1677ff;
    padding: 5px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 888;
    cursor: pointer;
    &:hover {
      transform: scale(1.1);
    }
  }
</style>
